<div class="IntegrationForm">
    <div class="ui form" *ngIf="newIntegration && models">
        <ng-template let-option #optionTemplate>
            <div><i class="option.icon icon" *ngIf="option.icon"></i>{{ option.name }}</div>
            <ul>
                <li *ngIf="option.storage">
                    <div class="ui green label">{{'integration_storage' | translate}}</div>
                </li>
                <li *ngIf="option.hook">
                    <div class="ui green label">{{'integration_hook' | translate}}</div>
                </li>
                <li *ngIf="option.event">
                    <div class="ui green label">{{'integration_event' | translate}}</div>
                </li>
                <li *ngIf="option.deployment">
                    <div class="ui purple label">{{'integration_deployment' | translate}}</div>
                </li>
            </ul>
        </ng-template>
        <div class="fields">
            <div class="four wide field">
                <label>{{ 'integration_model' | translate }}</label>
                <sui-select class="selection" name="model" [(ngModel)]="newIntegration.model"
                    (ngModelChange)="updateConfig()" [options]="models" labelField="name"
                    [optionTemplate]="optionTemplate" [isSearchable]="true" #select>
                    <sui-select-option *ngFor="let n of select.filteredOptions" [value]="n">
                    </sui-select-option>
                </sui-select>
            </div>
            <div class="six wide field">
                <ng-container *ngIf="newIntegration.model">
                    <div class="inline fields">
                        <div class="six wide field">
                            <label>{{ 'integration_name' | translate }}</label>
                        </div>
                        <div class="ten wide field">
                            <input name="name" type="text" [(ngModel)]="newIntegration.name">
                        </div>
                    </div>
                    <label>{{ 'integration_configuration' | translate }}</label>
                    <div class="inline fields" *ngFor="let k of newIntegration.model.default_config | keys">
                        <div class="six wide field">
                            <label>
                                <b>{{k}}</b>
                                <span *ngIf="newIntegration.config[k].description" suiPopup
                                    [popupText]="newIntegration.config[k].description" popupPlacement="right center">
                                    <i class="info circle icon"></i>
                                </span>
                            </label>
                        </div>
                        <div class="ten wide field">
                            <input type="text" [(ngModel)]="newIntegration.config[k].value"
                                *ngIf="newIntegration.config[k].type === 'string'">
                            <ng-container *ngIf="newIntegration.config[k].type === 'text'">
                                <codemirror [(ngModel)]="newIntegration.config[k].value" [config]="codeMirrorConfig"
                                    #codeMirror></codemirror>
                            </ng-container>
                            <input type="password" [(ngModel)]="newIntegration.config[k].value"
                                *ngIf="newIntegration.config[k].type === 'password'">
                        </div>
                    </div>
                </ng-container>
            </div>
            <div class="two wide right aligned field">
                <button class="ui green button" type="button" (click)="create()" [class.loading]="loading"
                    [disabled]="loading || !newIntegration.name || newIntegration.name === '' || !newIntegration.model">{{ 'btn_add' | translate }}</button>
            </div>
        </div>

    </div>
</div>
